<template>
    <div>成绩等级显示：</div>
    <p v-if="type == 'A'">优秀</p>
    <p v-else-if="type == 'B'">良好</p>
    <p v-else-if="type == 'C'">中等</p>
    <p v-else-if="type == 'D'">及格</p>
    <p v-else>不及格</p>
    <button @click="tran">切换成优秀</button>
    <button @click="type='B'">切换成良好</button>
    <button @click="type='C'">切换成中等</button>
    <button @click="type='D'">切换成及格</button>
    <button @click="type='E'">切换成不及格</button>
</template>
<script setup>
import { ref } from 'vue';

let type = ref('B');
const tran=()=>{
    type.value = 'A'
}

</script>
<style scoped></style>